<template>
	<view class="jf-view">
		<view class="jf-heard position-relative w-100 u-m-b-28 w-s-color-f">
			<image src="../../static/vip/7.png" class="w-100 h-100" mode=""></image>
			<view class="position-absolute top-0 left-0 w-100 h-100">
				<view class="row row-end">
					<view class="dh-btn flex-center u-f-24"></view>
				</view>
				<view class="u-p-l-44">
					<view class="u-f-32 u-m-b-32">当前收入</view>
					<view class="u-f-40 font-weight-550">{{spreadAmount}}</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-btn">
				<view @click="dhShow=true" class="list-btn-s flex align-center justify-center">
					提现到钱包
				</view>
			</view>
		</view>
		<view class="u-f-32 font-weight-550 u-p-b-8">收入明细</view>
		<view class="mx-item bg-f u-bdr-12 u-m-t-20 u-p-l-24 u-p-r-36 space-between" v-for="(item,index) in list"
			:key="index">
			<view class="column h-100 space-evenly">
				<view class="u-f-28">{{item.content}}</view>
				<view class="w-s-color-9 u-f-22">{{item.createTime}}</view>
			</view>
			<view class="u-f-32 font-weight-550">{{item.type==1?'+':'-'}}{{item.num}}</view>
		</view>
		<u-loadmore v-if="list.length>0" :status="status" />
		<empty :isShow="true" title="暂无明细" v-if="list.length == 0" />
		<u-popup v-model="dhShow" mode="center" border-radius="12">
			<view class="dh-view">
				<view class="text-center u-f-32 u-m-b-40">提现到钱包</view>
				<view class="row u-m-b-24">
					<view class="u-f-28 u-m-r-18">金额:</view>
					<view class="dh-fill u-bdr-12 bg-f u-flex-1 u-p-l-22">
						<input type="number" v-model="apreadAmount" placeholder="请输入提现到钱包的金额"
							placeholder-class="w-s-color-9 u-f-26" class="w-100 h-100" />
					</view>
				</view>
				<view class="w-s-color-9 u-f-24 u-m-b-8">提现到钱包说明：</view>
				<view class="w-s-color-9 u-f-20 u-m-b-12">1.推广收入转入到钱包，从钱包发起提现；</view>
				<view class="w-s-color-9 u-f-20 u-m-b-34">2.平台手续费扣除：{{bili}} %</view>
				<view class="flex-center">
					<button class="w-s-color-f u-f-32 bg-primary flex-center u-bdr-44 btn-sub" @click="userIntegral"
						:disabled="disabled" :loading="disabled">{{disabled ?'转换中' :'立即提现到钱包'}}</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import empty from '../../../components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				spreadAmount: 0,
				num: 0,
				list: [],
				status: 'loadmore',
				page: 1,
				limit: 10,
				pages: 1,
				refresherTriggered: true,
				dhShow: false,
				bili: 0,
				apreadAmount: '',
				disabled: false
			};
		},
		onShow() {
			this.getData()
			this.scrolltoupper()
			this.getHisList()
			this.getBili()
		},
		onPullDownRefresh() {
			this.scrolltoupper()
		},
		onReachBottom() {
			if (this.page < this.pages) {
				this.status = 'loading'
				this.page += 1
				this.getHisList()
			} else {
				this.status = 'nomore'
			}
		},
		methods: {
			getBili() {
				this.$u.get('/app/common/type/1000').then(res => { // 积分兑换比例 104
					if (res.code == 0 && res.data) {
						this.bili = res.data.value
					}
				});
			},
			getHisList() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.$Request.getT('/app/moneyDetails/queryUserSpreadMoneyDetails', data).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 0) {
						this.pages = res.data.pages
						if (this.page < this.pages) {
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
						if (this.page == 1) {
							this.list = res.data.records
						} else {
							this.list = [...this.list, ...res.data.records]
						}
					}
				})
			},
			getData() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.$u.api.queryInviter(data).then(res => {
					if (res.code == 0) {
						this.spreadAmount = res.data.inviteMoney.spreadAmount
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			//兑换
			userIntegral() {
				if (!this.apreadAmount) {
					uni.showToast({
						title: '请输入推广金数量',
						icon: 'none'
					})
					return
				}
				if (this.apreadAmount <= 0) {
					uni.showToast({
						title: '请输入正确推广金数量...',
						icon: 'none'
					})
					return
				}
				this.disabled = true
				let data = {
					apreadAmount: this.apreadAmount
				}
				this.$Request.postT('/app/moneyDetails/creditsExchangeSpread', data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '转换成功'
						})
						this.dhShow = false
						this.scrolltoupper()
						this.apreadAmount = ''
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

					this.disabled = false
				})
			},
			goNav(url) {
				uni.navigateTo({
					url: url
				})
			},
			//上拉刷新
			scrolltoupper() {
				this.page = 1
				this.refresherTriggered = true
				this.getData()
				this.getHisList()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F4F5F9;
	}

	.list {
		width: 100%;

		.list-input {
			padding: 0rpx;
		}

		.list-btn {
			padding: 0rpx 0rpx 20rpx 0rpx;
		}

		.list-btn-s {
			width: 100%;
			height: 88rpx;
			color: #ffffff;
			background-color: #adaff5;
			border-radius: 8rpx;
		}
	}

	.jf-view {
		width: 100vw;
		min-height: 100vh;
		padding: 20rpx 32rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

		.jf-heard {
			height: 218rpx;

			.dh-btn {
				width: 144rpx;
				height: 46rpx;
				border-radius: 24rpx 22rpx 0rpx 24rpx;
			}
		}

		.mx-item {
			height: 140rpx;
		}

		.dh-view {
			width: 590rpx;
			padding: 40rpx 52rpx;

			.dh-fill {
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);
				height: 58rpx;
			}

			.btn-sub {
				width: 348rpx;
				height: 64rpx;
			}
		}
	}
</style>